<template>
  <div class="relative w-full h-full">
    <PageHeader :title="$t('memberLists.index.会员列表')" />
    <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    />

    <!-- <div class="mt12 toolbar flex_aic_jcsb">
      <div class="addBtn flex_aic_jcc" @click="editDiaVisible = true">
        <SvgIcon name="iconxinzeng" class="mr8" />
        <span>新增会员</span>
      </div>
    </div> -->
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table mt12"
      height="calc(100% - 200px)"
      border
      v-loading="loading"
    >
      <el-table-column prop="nickName" :label="$t('memberLists.index.会员信息')" width="300px">
        <template #default="{ row }">
          <div class="flex_aic">
            <el-avatar class="flex-shrink-0" :size="60" :src="row.avatar" />
            <div class="ml12 text-left">
              <div class="color-333333">{{ row.nickName }}</div>
              <div class="color-999999">{{ row.phone }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="gender" :label="$t('memberLists.index.会员性别')">
        <template #default="{ row }">{{
          row.gender == 1 ? $t('memberLists.index.男') : $t('memberLists.index.女')
        }}</template>
      </el-table-column>
      <el-table-column prop="birthday" :label="$t('memberLists.index.会员生日')">
        <template #default="{ row }">{{
          moment(row.birthday).format("YYYY-MM-DD")
        }}</template>
      </el-table-column>
      <el-table-column prop="consumeTotal" :label="$t('memberLists.index.会员消费总金额')" />
      <!-- <el-table-column prop="xxxx" label="会员总积分" /> -->
      <el-table-column prop="consumeTotal" :label="$t('memberLists.index.积分消费总额')" />
      <el-table-column prop="point" :label="$t('memberLists.index.剩余总积分')" />
      <el-table-column prop="createdTime" :label="$t('memberLists.index.注册时间')"
        ><template #default="{ row }">{{
          moment(row.createdTime).format("YYYY-MM-DD")
        }}</template>
      </el-table-column>
      <el-table-column prop="createdTime" :label="$t('memberLists.index.是否可用')"
        ><template #default="{ row }">
          <span class="mr10">{{ row.status == 1 ? $t('memberLists.index.已启用') : $t('memberLists.index.已停用') }}</span>
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatus(row)"
            v-if="row.status == 1"
            v-my-point="'vip:disable'"
          />
          <el-switch
            v-model="row.status"
            :active-value="1"
            :inactive-value="0"
            @change="handleStatus(row)"
            v-else
            v-my-point="'vip:enable'"
          />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="recommend_count" label="会员推荐用户量" />
      <el-table-column prop="recommend_user" label="会员推荐人" />
      <el-table-column prop="total_consume" label="会员消费总额" />
      <el-table-column prop="integral" label="剩余积分" /> -->
      <el-table-column :label="$t('memberLists.index.操作')" fixed="right" width="150px">
        <template #default="scope">
          <div class="operationBtnRow">
            <el-button
              type="text"
              size="small"
              @click="handleSendPoint(scope.row)"
              v-my-point="'vip:sendPoint'"
              >{{ $t('memberLists.index.发放积分') }}</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-end mt24 absolute bottom-0 right-0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <EditDia v-model="editDiaVisible" :data="editDiaData"></EditDia>
    <SendPointDia
      v-model="sendPointDiaVisible"
      :data="sendPointDiaData"
      @success="getDataList"
    ></SendPointDia>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import EditDia from "./editDia.vue";
import Api from "@/config/api/api";
import moment from "moment";
import SearchCom from "@/components/SearchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import { ElMessage } from "element-plus";
import SendPointDia from "./sendPoint.vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();

const searchList = computed(() => [
    {
        label: t('memberLists.index.昵称'),
        key: "nickName",
        type: "input",
    },
    {
        label: t('memberLists.index.手机号'),
        key: "phone",
        type: "input",
    },
    {
        label: t('memberLists.index.会员状态'),
        key: "status",
        type: "select",
        options: [
            { label: t('memberLists.index.启用'), value: 1 },
            { label: t('memberLists.index.停用'), value: 0 },
        ],
    },
    {
        label: t('memberLists.index.注册时间'),
        key: "createdTime",
        type: "daterange",
    },
]);

const {
    currentPage,
    pageSize,
    total,
    tableData,
    loading,
    getDataList,
    handleSizeChange,
    handleCurrentChange,
    handleSearch,
    handleReset,
} = useTableMixin(Api.vip_list);

const editDiaVisible = ref(false);
const editDiaData = ref({});
const sendPointDiaVisible = ref(false);
const sendPointDiaData = ref({});

const handleDelete = (row) => {
    console.log(row);
};

const handleEdit = (row) => {
    editDiaVisible.value = true;
    editDiaData.value = JSON.parse(JSON.stringify(row));
};

const toSearch = (params) => {
    handleSearch({
        ...params,
        createdTimeStart: params?.createdTime?.[0]
            ? moment(params?.createdTime?.[0]).format("YYYY-MM-DD 00:00:00")
            : undefined,
        createdTimeEnd: params?.createdTime?.[1]
            ? moment(params?.createdTime?.[1]).format("YYYY-MM-DD 23:59:59")
            : undefined,
    });
};

const handleStatus = (row) => {
    Api[row.status == 1 ? "enable_vip" : "disable_vip"](row.id).then((res) => {
        if (res.status == 200) {
            ElMessage.success(t('memberLists.index.操作成功'));
            getDataList();
        }
    });
};

const handleSendPoint = (row) => {
    sendPointDiaVisible.value = true;
    sendPointDiaData.value = JSON.parse(JSON.stringify(row));
};
</script>

<style lang="scss" scoped>
.toolbar {
  width: 100%;
  height: 42px;
  margin-bottom: 5px;
  background: rgba(255, 126, 40, 0.1);
}
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
.split {
  width: 1px;
  height: 12px;
  background: #ddd;
  margin: 0 5px;
}
</style>
